<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="div1">
    <span>{{massage}}</span>
    <br>
    <span>{{reversedMessage}}</span>
    <br>
    <span>{{reversedMessages()}}</span>
    <br>
    <span>{{get_time}}</span>
    <br>
    <span>{{get_times()}}</span>
    <br>
</div>


<div class="app">
    <span>{{FullName}}</span>
    <span></span>
</div>
<div class="app2">
     <span>{{FullName2}}</span>
</div>

<div class="com">
    <input type="text" v-model="kiloMeters">
    <input type="text" v-model="Meters">
    <span class="data"></span>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
    // 计算属性 : 就省这在用模板语法去渲染了, 增加了代码的可读性
    //
    new Vue({
        el: '.div1',
        data: {
            massage: "hello word",
            time: Date.now()
        },
        computed: {
            reversedMessage: function () {
                return this.massage.split('').reverse().join('')
            },
            get_time: function () {
                return Date.now()
            }
        },
        methods: {
            reversedMessages: function () {
                return this.massage.split('').reverse().join('')
            },
            get_times: function () {
                return this.time
            }
        }
    })

    // todo 计算属性 vs 方法
    /*
    * 上面的案例中,函数,计算属性都可以达到同样的效果
    * 二者有什么区别?
    * 1. 计算属性依赖的是缓存机制, 一旦所依赖的值发生变化, 就会返回一个新的值,否则会一直返回之前的值,再渲染到dom元素上
    * 2. 方法,每次需要获取属性时,都会调用一下那个方法,不存在缓存机制
    * 为了更好的性能可以选择计算属性,因为,获取到一个属性时,可以不用总去调用getter方法
    * */


    // todo 侦听器 vs 计算属性
    // 当你有一些数据需要随着其他数据发生变化时,我们很容易想到watch的回调函数,
    // 计算属性的有点是什么?
    // 实时监听返回数据"依赖"的变化,如果这个依赖发生了变化,那么就会返会一个新的值,
    // 最好的方法不是watch回调,而是计算属性


    // 看监听器
    var vm = new Vue({
        el: '.app',
        data: {
            firstName: 'Zhang',
            lastName: 'Yedi',
            FullName: 'Zhang Yedi'
        },
        // 设置监听者,监听相应属性的变化
        watch: {
            //                 传进来的值
            firstName: function (val) {
                this.FullName = val + this.lastName
            },
            lastName: function (val) {
                this.FullName = this.firstName + val
            }
        }
    })

    //再看计算属性 直接就省去很多代码
    new Vue({
        el:'.app2',
        data:{
            firstName: 'Zhang',
            lastName: 'Yedi'
        },
        computed: {
            FullName2: function () {
                return this.firstName + this.lastName
            }
        }
    })

    // 监听器案例:
    app = new Vue({
        el:'.com',
        data: {
            kiloMeters: 0,
            Meters: 0
        },
        watch: {
            kiloMeters: function (val) {
                this.kiloMeters = val
                this.Meters = this.kiloMeters * 1000
            },
            Meters: function (Val) {
                this.kiloMeters = Val / 1000
                this.Meters = Val
            }
        }
    })
    var data = document.querySelector('span.data')
    // 这个回调函数将会在vm属性改变后调用
    app.$watch('kiloMeters',function (newValue,oldValue) {
        data.innerHTML = '改变前的值' + oldValue + '改变后的值' + newValue
    })


</script>
</html>